<template>
    <div class="internet">
        <!-- 搜索区域 -->
        <div class="search-area">
            <div>
                <el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <el-col :span="8">
                            <p>用户名</p>
                            <el-input v-model="searchForm.name" placeholder="请输入用户名" clearable />
                        </el-col>
                        <el-col :span="8">
                            <p>手机号</p>
                            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
                        </el-col>
                        
                        <el-col :span="8">
                            <p>用户ID</p>
                            <el-input v-model="searchForm.userId" placeholder="请输入用户ID" clearable />
                        </el-col>
                    </div>

                </el-row>
            </div>

            <div>
                <el-button @click="handleSearch">搜索</el-button>
            </div>


        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="paginatedData" style="width: 100%;" border stripe
                :header-cell-style="{ background: '#f5f7fa' }">
                <!-- 表格列定义保持不变 -->
                <el-table-column prop="userId" label="用户ID" min-width="120" />
                <el-table-column label="头像" width="70">
                    <template #default="scope">
                        <el-avatar :src="scope.row.avatar" size="small" />
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" min-width="120" />
                <el-table-column prop="phone" label="手机号" min-width="120" />
                
                <el-table-column prop="last" label="流量剩余" min-width="160" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
                            
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="filteredTableData.length" :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background="true" />
            </div>
        </div>

        <DetailsDrawer v-model:visible="drawerVisible" :row-data="currentRowData" />
    </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import DetailsDrawer from './internetDetail.vue';

// 搜索表单
const searchForm = reactive({
    name: '',
    phone: '',
    userId: ''
});



// 原始表格数据
const rawData = ref([
    {
        userId: '1',
        username: '赵先生',
        phone: '150****5885',
        last: '100GB',
        
        avatar: '../assets/logo.png'
    },
    {
        userId: '2',
        username: '王先生',
        phone: '152****7449',
        last: '100GB',
       
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    },
    {
        userId: '3',
        username: '孙先生',
        phone: '134****1387',
        last: '100GB',
       
        avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    }
]);

// 过滤后的表格数据(计算属性)
const filteredTableData = computed(() => {
    return rawData.value.filter(item => {
        // 手机号过滤
        const phoneMatch = !searchForm.phone ||
            (item.phone && item.phone.includes(searchForm.phone.replace(/[*]/g, '')));

        // 状态过滤
        let statusMatch = true;
        if (searchForm.status && searchForm.status !== 'all') {
            statusMatch = item.status === searchForm.status;
        }

        // 用户ID过滤
        const userIdMatch = !searchForm.userId ||
            (item.userId && item.userId.toString().includes(searchForm.userId));

        // 关键词过滤(用户名或直播间标题)
        let keywordMatch = true;
        if (searchForm.keyword) {
            const keyword = searchForm.keyword.toLowerCase();
            keywordMatch = (item.username && item.username.toLowerCase().includes(keyword)) ||
                (item.title && item.title.toLowerCase().includes(keyword));
        }

        return phoneMatch && statusMatch && userIdMatch && keywordMatch;
    });
});

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
});

// 分页配置
const paginatedData = computed(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    return filteredTableData.value.slice(start, end);
});


// 搜索功能
const handleSearch = () => {
    // 重置到第一页
    pagination.currentPage = 1;
    console.log('执行搜索:', searchForm);
    // 调用API获取搜索结果
    // 使用计算属性filteredTableData自动过滤数据
};

// 抽屉---详情页面
const drawerVisible = ref(false);
// 当前选中的行数据
const currentRowData = ref({});

// 查看详情
const handleView = (row) => {
    currentRowData.value = row;
    drawerVisible.value = true;
    console.log('查看详情:', row);
};



// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    console.log('每页条数变化:', size);
    // 调用API获取对应条数的数据
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    console.log('当前页变化:', page);
    // 调用API获取对应页的数据
};
</script>
<style scoped lang="scss">
.internet {
    .search-area {
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 10px;
    }

    .table-container {
        margin-top: 20px;
    }

    .title-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .pagination-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .custom-pagination {
        --el-pagination-hover-bg-color: #f5f7fa;
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #606266;
        --el-pagination-button-disabled-bg-color: #f5f7fa;
        --el-pagination-button-disabled-text-color: #c0c4cc;
    }

    .pagination-pages {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 0;
        margin: 0 4px;
        background-color: transparent;
        border: 1px solid #dcdfe6;
        color: #606266;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination-btn:hover {
        color: #409eff;
    }

    .pagination-btn.active {
        background-color: #409eff;
        color: #fff;
        border-color: #409eff;
    }

    .pagination-btn.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .ellipsis {
        padding: 0 4px;
        color: #606266;
        font-size: 14px;
    }

}
</style>